<template>
  <div class="taskmanage" style="background:#FAFAFA;height:100%;">
    <van-tabs v-model="active" color="rgb(25,137,250)">
      <van-tab title="任务大厅">
        <el-card v-for="(i,index) in extra_task" :key="index" style="margin:10px auto;width:95%;">
          <div class="titledate">
             <span class="first">
            <van-icon name="clock-o"/>
            <span style="margin-left:5px">{{ i.create_time }}</span>
          </span>
          </div>
          <div style="display:flex;justify-content: space-between;align-items: center;margin-top:10px;">
            <div style="display:flex;">
              <viewer>
                <img :src="i.picture_address" style="width:60px;height:60px;" alt="">
              </viewer>
              <div style="display:flex;flex-direction: column;margin-left:10px;justify-content: space-around">
                <span style="font-size:14px;">关键词:{{ i.key_word }}</span>
                <span style="font-size:14px;width:200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">商家提示:{{
                    i.tips_info
                  }}</span>
                <span style="font-size:12px;">任务数量:{{ i.task_count }}</span>
              </div>
            </div>
            <van-button type="info" size="small" style="border-radius:10px;" @click="getRaskList(i)">领取任务
            </van-button>
          </div>
        </el-card>
      </van-tab>
      <van-tab title="任务列表 ">
        <div class="activebox">
          <div class="activeone" v-for="item in task_extra" :key="item.id">
            <p class="titledate">
          <span class="first">
            <van-icon name="clock-o"/>
            <span style="margin-left:5px">{{ item.create_time }}</span>
          </span>
              <span class="typestyle"
                    :class="{'red':item.platform_type == 1,'green':item.platform_type == 2,'blue':item.platform_type == 3,'black':item.platform_type == 4,'purple':item.platform_type == 5,'pink':item.platform_type == 6}">
            {{ item.platform_type == 1 ? '饿了么' : (item.platform_type == 2 ? '大麦' : (item.platform_type == 3 ? '大众点评' : (item.platform_type == 4 ? '美团' : (item.platform_type == 5 ? '小红书' : '其他')))) }}
          </span>
            </p>
            <p class="picimg">
              <img :src="item.picture_address" alt="">
            </p>
            <div class="bottombox">
              <p>
                <span>姓名：{{ item.brushhands_name }}</span>
              </p>
              <p
                v-if="item.task_status == 7">
                <span style="color:red;font-size:18px;font-weight:600;">请耐心等待商家审核！</span>
              </p>
              <p v-if="item.task_status == 4">
                <span v-if="item.task_type == 1">审核状态：已拒绝,前去退款</span>
                <span v-if="item.task_type != 1">审核状态：未按照要求去做</span>
              </p>
              <div
                v-if="item.task_status ==3">
                <span>付款金额：</span>
                <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                      @click="handleMoney(item)">{{ item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥' + item.price + ')' : '本金(￥' + item.price + ')' }} </span>
                <span class="btnmoney" :class="{'blue':item.tx_status == 3}" @click="onMoney(item)"
                      style="margin-left:10px">{{ item.tx_status == 3 ? '已提佣金(￥' + item.user_commission + ')' : '佣金(￥' + item.user_commission + ')' }}</span>
              </div>
              <div v-else>
                <span v-if="item.task_type == 1">付款金额：￥{{ item.price }}</span>
                <span>佣金：￥{{ item.user_commission }}</span>
                <p style="font-size:20px;color:red;font-weight:600" v-if="item.task_status == 7">审核时间为24小时</p>
              </div>
              <div v-if="item.task_status == 1" style="display:flex;justify-content: flex-end;">
                <van-button type="info" size="small" style="margin-right:10px;" @click="goonrask(item)">继续任务</van-button>
                <van-button type="danger" size="small" @click="calcel(item.id)">取消任务</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-dialog v-model="showme" title="提现" show-cancel-button @confirm="ConfirmWithDraw">
      <div style="display:flex;flex-direction:column;align-items: center;justify-content: center;height:100px;font-size:18px;">
        <span>是否把本金和佣金为<b style="color:red;font-size:20px;">{{withDraw.user_commission+withDraw.price}}</b>元提现到金库</span>
        <p>提现过后在金库内查看</p>
      </div>
    </van-dialog>
<!--    <div class="nodata" v-else>-->
<!--      <img src="../assets/img/nodata.png" alt="">-->
<!--      <span class="textcontent">暂时没有额外任务，马上去申请淘宝任务吧</span>-->
<!--      <span class="taskbtn" @click="$router.push('/home')">申请任务</span>-->
<!--    </div>-->
    <return></return>
    <Footer></Footer>
  </div>
</template>

<script>
import {
  evaluate_list,
  evaluate_withdrawal,
  extra_task_receive,
  evaluate_submit,
  extra_task_list,
  extra_task_withdrawal,
  extra_task_cancel, task_extra_list
} from "../api/api";
import Footer from '../components/footer.vue'
import Return from "./returnone";

export default {
  name: "PJ_task",
  components: {Return, Footer},
  data() {
    return {
      total: 0,
      taskinfo: [],
      Dialog: true,
      showme:false,
      withDraw:{},
      ids: "",
      isshow: false,
      importHeaders: {token: localStorage.getItem('xfq_token')},
      showings: false,
      taskid: '',
      currentPage: 1,
      taskclass: '',
      task_extra:[],
      show: false,
      vaultDialog: false,
      evaluate_img: [],
      yjmoney: [],
      imgheader: {token: window.localStorage.getItem('xfq_token')},
      image: [],
      images: '',
      showing: false,
      page_size: 20,
      page: 1,
      tabadata: [],
      extra_task: [],
      active: '1',
    }
  },
  methods: {
    goonrask(item){
      this.$router.push({
        path: "/OtherRask",
        query: {
          id: item.id
        },
      })
    },
    ConfirmWithDraw(){
      let params = {
          id:this.withDraw.id
      }
      extra_task_withdrawal(params).then((res)=>{
        console.log(res);
        this.task_extra_lists()
      })
    },
    calcel(id){
      let params = {
        id:id
      }
      extra_task_cancel(params).then((res)=>{
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.task_extra_lists()
        } else {
          this.$toast(res.Message)
        }
      })
    },
    task_extra_lists(){
      let params = {
        page:1,
        page_size:10
      }
      task_extra_list(params).then((res)=>{
        this.task_extra = res.Data
        console.log(this.task_extra,'11111111111');
      })
    },
    //本金提现
    handleMoney(item) {
      if (item.tx_status == 2 || item.tx_status == 3) {
        this.$toast('本金已提现！')
      } else {
        this.withDraw = item
        this.showme = true
      }
    },
    getRaskList(item) {
      let params = {
        task_id: item.task_id
      }
      extra_task_receive(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.$router.push('/OtherUserlist')
        } else {
          this.$toast(res.Message)
          this.extra_task_lists()
        }
      })
    },
    //佣金提现到金库
    onConfirm() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        id: this.yjmoney.id,
      }
      evaluate_withdrawal(params).then(res => {
        toastload.clear()
        console.log('金库', res)
        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.getPJlist(), 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //额外任务列表
    extra_task_lists() {
      let params = {
        page: 1,
        page_size: 10,
        platform_type: null,
      }
      extra_task_list(params).then((res) => {
        console.log(res);
        this.extra_task = res.Data
      })
    },
    handlerror() {
      this.images = ""
    },
    //上传截图
    Confirmimg() {
      let params = {
        id: this.evaluate_img.id,
        evaluate_img: this.images
      }
      evaluate_submit(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.getPJlist()
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //评价列表
    getPJlist() {
      let params = {
        page: this.page,
        page_size: this.page_size,
      }
      evaluate_list(params).then((res) => {
        if (res.Status == 200) {
          this.tabadata = res.Data.map((item) => {
            item.img = JSON.parse(item.img)
            return item
          })
          console.log(this.tabadata);
        }
      })
    },
    //上传图片成功返回
    handlesuccess(res) {
      this.images = res.UrlImg
    }
  },
  mounted() {
    this.getPJlist()
    this.extra_task_lists()
    this.task_extra_lists()
    console.log(this.image);
  }
}
</script>

<style scoped lang="stylus">
.box-card {
  height 100%
  overflow-x hidden
  font-size 16px
  border-bottom-left-radius 5px
}

.pass {
  margin-bottom 10px
}

.dialog {
  padding 20px 0 30px
  font-size 14px

  img {
    height 100px
  }

  p {
    text-align center
  }
}

.nodata {
  padding-top: 80px
  display flex
  flex-direction column
  justify-content center
  align-items center

  img {
    width 70%
  }

  .textcontent {
    font-size 14px
    color #a79478
  }

  .taskbtn {
    width 200px
    color #ffffff
    font-size 14px
    background #64c5ff
    text-align center
    line-height 36px
    margin-top 20px
  }
}
.taskmanage {
  height 100%

  .van-tabbar--fixed {
    position fixed
    top 0
  }

  .dialog {
    padding 20px 0 30px
    font-size 14px

    img {
      height 100px
    }

    p {
      text-align center
    }
  }

  .nodata {
    padding-top: 80px
    display flex
    flex-direction column
    justify-content center
    align-items center

    img {
      width 70%
    }

    .textcontent {
      font-size 14px
      color #a79478
    }

    .taskbtn {
      width 200px
      color #ffffff
      font-size 14px
      background #64c5ff
      text-align center
      line-height 36px
      margin-top 20px
    }
  }

  .activebox {
    position relative
    margin-bottom 50px
    padding 10px
    background #f8f8f8

    .activeone {
      border-radius 5px
      margin-bottom 50px
      background #ffffff

      .titledate {
        font-size 14px
        padding 10px 0
        color #777
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #f8f8f8

        .first {
          margin-left 10px
          display flex
          align-items center
        }

        .typestyle {
          color #fff
          display inline-block
          line-height 24px
          padding 0 10px
          border-top-left-radius 12px
          border-bottom-left-radius 12px
        }
      }

      .picimg {
        display flex
        flex-direction column
        align-items center

        img {
          width 80px
          height 80px
          border-radius 5px
          margin 10px
        }

        span {
          text-align center
          display inline-block
          width 80px
          line-height 30px
          font-size 14px
          border-radius 20px
          background #a0c3fb
          color #3b7dfd
        }
      }
    }

    .activeone:last-child {
      margin-bottom 50px
    }

    .green {
      background #00d5c3
    }

    .red {
      background #f54d21
    }

    .blue {
      background #04a7f5
    }

    .purple {
      background rebeccapurple
    }

    .black {
      background black
    }

    .pink {
      background lightpink
    }

    .bottombox {
      padding 10px
      font-size 14px
      color #636363

      p {
        display flex
        justify-content space-between
        align-items center
        line-height 26px
      }

      div {
        line-height 26px
      }

      .btnmoney {
        background #f6aaa0
        color #ffffff
        padding 5px 10px
        border-radius 5px
      }

      .blue {
        background #bbb
      }
    }
  }
}
.titledate {
  font-size 14px
  color #777
  display flex
  justify-content space-between
  align-items center
  border-bottom 2px solid #f8f8f8
  .first {
    margin-left 10px
    margin-bottom 10px
    display flex
    align-items center
  }
}

.nodata {
  padding-top: 80px
  display flex
  flex-direction column
  justify-content center
  align-items center

  img {
    width 70%
  }

  .textcontent {
    font-size 14px
    color #a79478
  }

  .taskbtn {
    width 200px
    color #ffffff
    font-size 14px
    background #64c5ff
    text-align center
    line-height 36px
    margin-top 20px
  }
}

</style>
